<template>
  <div class="flex-detail">
    <!-- 顶部 -->
    <div v-if="$slots.top" class="detail-header detail-head marBottom6">
      <slot name="top" />
    </div>
    <!-- 头部 无padding -->
    <div v-if="$slots.head_" class="detail-header detail-head">
      <slot name="head_" />
    </div>
    <!-- 头部 -->
    <div v-if="$slots.head" class="detail-header detail-head" style="padding: 10px">
      <slot name="head" />
    </div>
    <el-scrollbar :noresize="false" class="detail-container">
      <!-- body 顶 -->
      <div v-if="$slots['info-top']" class="detail-top">
        <slot name="info-top" />
      </div>
      <!-- 内容 -->
      <div v-if="$slots.info" class="detail-content">
        <slot name="info" />
      </div>
      <!-- detailBody，底部子表区域 -->
      <div v-if="$slots.bottom" class="detailList">
        <slot name="bottom" />
      </div>
    </el-scrollbar>
    <div v-if="$slots['bottom-fixed']" class="detail-header">
      <slot name="bottom-fixed" />
    </div>
  </div>
</template>
